/* 轮播滑块 */
import { useState } from 'react'
import './../../css/selected.scss'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
function selectedCarouselslider() {
    const CarouselSliderImgs = [
        '/public/png1.png',
        '/public/png2.png',
        '/public/png3.png',
        '/public/png4.png',
        '/public/png5.png',
        '/public/png6.png',
        '/public/png7.png',
        '/public/png8.png',
    ]
    const [currentIndex, setCurrentIndex] = useState(0);
    const [bottonShow, setBottonShow] = useState(true)
    const handleClick = (direction: 'left' | 'right') => {
        if (direction === 'left') {
            setCurrentIndex(0)
            setBottonShow(true)
        } else {
            setCurrentIndex(-424)
            setBottonShow(false)
        }
    }
    return (
        <div className="carousel-box">
            <div className="carousel-wrapper" style={{ transform: `translateX(${currentIndex}px)` }}>
                {
                    CarouselSliderImgs.map((imgs, index) => (
                        <img key={index} src={imgs} width={190} className="carousel-image" />
                    ))
                }
            </div>
            <div style={{ display: bottonShow ? 'none' : ' block' }}
                onClick={() => handleClick('left')} className='leftSlider' ><LeftOutlined /></div>
            <div style={{ display: !bottonShow ? 'none' : ' block' }}
                onClick={() => handleClick('right')} className='rightSlider'><RightOutlined /></div>
        </div>
    )
}

export default selectedCarouselslider
